<template>
	<div class="background">
		<loading v-if="loading"></loading>
		<div v-if="!loading">
			<div class="top">
				<div class="left" @click="comeback">
					<div class="back"></div>
				</div>
				<div class="title">{{MovieDetail.title}}</div>
				<div class="right"></div>
			</div>
			<div class="movie_msg">
				<div class="poster">
			        <img :src="MovieDetail.images.medium">
			      </div>
			      <div class="movie_msg_title">
			      	<h1>{{MovieDetail.title}}</h1>
			      	<star class="star" :num="MovieDetail.rating.stars"></star>
			      	<p class="count">{{MovieDetail.rating.average}}({{MovieDetail.collect_count}}人评分)</p>
			      	<p class="date">{{MovieDetail.year}}年</p>
			      	<p class="movie_class">{{MovieDetail.genres | genres}}</p>
			      	<p class="country">{{MovieDetail.countries[0]}}</p>
			      	<p class="pubdates">{{MovieDetail.pubdates[2]}}</p>
			      </div>
			</div>
			<div class="msg_count">
				<div class="wish_count">{{MovieDetail.wish_count}}人想看</div>
				<div class="reviews_count">{{MovieDetail.reviews_count}}人看过</div>
			</div>
			<div class="msg_summary">
				{{MovieDetail.summary}}
			</div>
			<div class="actior">
				<h3>演职人员</h3>
				<div class="actor">
					<div class="directors" v-for="directors in MovieDetail.directors" v-on:click="gotoDirector(directors.id)">
						<img :src="directors.avatars.small">
						<p>{{directors.name}}[导演]</p>
					</div>
					<div class="casts" v-for="casts in MovieDetail.casts" v-on:click="gotoCasts(casts.id)">
						<img :src="casts.avatars.small">
						<p>{{casts.name}}</p>
					</div>
				</div>
			</div>
			<div class="duanpings">
				<h3>热门短评</h3>
				<div class="duanping" v-for="popular_comments in MovieDetail.popular_comments">
					<div class="duanping_stars">
						<star class="duanping_star" :num="popular_comments.rating.value*10"></star>
						<span class="duanping_time">{{popular_comments.created_at}}</span>
						<p class="duanping_comment">{{popular_comments.content}}</p>
						<div class="author">
							<img :src="popular_comments.author.avatar">
							<span>{{popular_comments.author.name}}</span>
						</div>
					</div>
				</div>
				<p class="msg-all-Comment" v-on:click="gotoDp">查看全部短论</p>
				<p class="msg-all-Comment" v-on:click="gotoCp">查看全部影评</p>
			</div>
		</div>
	</div>
</template>

<script>
import star from './star'
import loading from './loading'
	export default {
		data() {
			return {
				MovieDetail: {
					title: ''
				},
				loading: true
			}
		},
	  components: {
	    star: star,
	    loading: loading
	  },
		mounted() {
			var id = this.$route.params.id
			this.$http.jsonp("https://api.douban.com/v2/movie/subject/" + id + '?apikey=0b2bdeda43b5688921839c8ecb20399b').then(function(response) {
		        this.MovieDetail	 = response.body
		        this.loading = false
		  })
		},
		filters: {
	    genres: function (value) {
	     return value.join(',')
	    }
	  },
	  methods: {
	    gotoDp:function() {
	      this.$router.push({name:'MovieDp'})
	    },
	    gotoCp:function() {
	      this.$router.push({name:'MovieCp'})
	    },
	    gotoDirector:function(id) {
	      this.$router.push({name:'MovieDirector', params: {id:id}})
	    },
	    gotoCasts:function(id) {
	      this.$router.push({name:'MovieCasts', params: {id:id}})
	    },
	    comeback: function () {
        window.history.go(-1)
      }
	  }
	}
</script>

<style scoped>
	.background {
		background-color: #e5e9f2;
		position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: scroll;
	}
	.top{
		display: flex;
    height: 50px;
    width: 100%;
    background-color: #e54847;
    padding: 6px;
    box-sizing: border-box;
    color: #fff;
    font-size: 20px;
	}
	.top .left,.top .right{
		width: 50px;
		text-align: center;
		position: relative;
	}
	.top .back{
    position: absolute;
    top: 12px;
    left: 12px;
		height: 13px;
    width: 13px;
    border: 2px solid #fff;
    border-width: 0 0 2px 2px;
    transform: rotate(45deg);
	}
	.top .title{
		flex: 1;
		text-align: center;
		vertical-align: middle;
		line-height: 40px;
		width: 197px;
		overflow: hidden;
		overflow: scroll;
	}
	.movie_msg{
		display: flex;
    padding: 15px;
    color: #6b6868;
    background-color: #b4b1b1;
	}
	.poster img{
		border:1px solid #fff;
		margin-right: 10px;
	}
	.movie_msg_title h1{
		font-size: 20px;
    color: #343232;
    line-height: 30px;
	}
	.movie_msg_title p{
		font-size: 12px;
		line-height: 18px;
	}
	.movie_msg_title  .star{
		line-height: 19px;
	}
	.msg_count {
		display: flex;
		justify-content: center;
    padding: 10px;
	}
	.wish_count, .reviews_count {
		margin-right: 20px;
    margin-left: 20px;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    width: 100px;
    height: 30px;
    color: #fff;
    border-radius: 5px;
    background-color: #e54847;
	}
	.msg_summary {
		padding: 10px;
    font-size: 14px;
    color: #555;
    line-height: 21px;
	}
	.actior{
		padding: 10px;
	}
	.actior h3{
		color: #666;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 5px;
	}
	.actor{
		white-space: nowrap;
    overflow-x: scroll;
    margin-top: 10px;
	}
	.actor .directors{
		display: inline-block;
	}
	.actor .casts{
		display: inline-block;
	}
	.actor img{
    padding-right: 5px;
	}
	.actor p{
		width: 65px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 18px;
    color: #2c3e50;
	}
	.duanpings {
		padding: 10px;
    box-sizing: border-box;
	}
	.duanpings h3 {
		color: #666;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 5px;
	}
	.duanping_star{
		float: left;
		line-height: 19px;
	}
	.duanping_time {
		font-size: 12px;
		color: #2c3e50;
	}
	.duanping_comment {
		color: #333;
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 12px;
    line-height: 19px;
	}
	.duanpings img{
		border-radius: 24px;
	}
	.author{
    border-bottom: 1px solid #d6d3d3;
	}
	.author * {
		vertical-align: middle;
    padding-bottom: 5px;
	}
	.author span{
    margin-left: 5px;
    color: #999;
    font-size: 12px;
    line-height: 20px;
    display: inline-block;
	}
	.msg-all-Comment {
		color: #e54847;
    font-weight: lighter;
    text-align: center;
    font-size: 15px;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #d6d3d3;
	}
</style>